<template>
    <div class="bottom">
        <mt-popup
                v-model="shopCartPopupVisible"
                position="bottom">
            <div>
                <ShopcartModal :add_to_cart_finish="add_to_cart_finish"></ShopcartModal>
            </div>
        </mt-popup>
        <mt-popup
                v-model="buyitNowPopupVisible"
                position="bottom">
            <div>
                <BuyItNowModal></BuyItNowModal>
            </div>
        </mt-popup>


        <div class="layout_3">
            <div class="svg_with_text">
                <SvgIcon icon="icon-weibiaoti-" style="font-size: 25px"></SvgIcon>
                <div class="text">客服</div>
            </div>
            <div class="svg_with_text">
                <SvgIcon icon="icon-love" style="font-size: 25px"></SvgIcon>
                <div class="text">收藏</div>
            </div>
            <div class="svg_with_text" @click="$router.push('/shopcart')">
                <div class="tag" v-if="$store.state.shopcart.shopcartItems.length!=0">
                    {{$store.state.shopcart.shopcartItems.length}}
                </div>
                <SvgIcon icon="icon-gouwuche1" style="font-size: 25px"></SvgIcon>
                <div class="text">购物车</div>
            </div>
        </div>
        <div class="gouwuche_lijigoumai">
            <div class="gouwuche" @click="go_to_shop_cart">加入购物车</div>
            <div class="likegoumai" @click="got_to_buy_it_now">立即购买</div>
        </div>


    </div>
</template>
<script>
    import SvgIcon from '../../../components/svgIcon'
    import {isLogin} from "../../../utils";
    import myalert from "../../../utils/myalert";
    import {get_shop_cart_items} from "../shopcartModal/service";
    import withStore from "../../../vuex/withStore";

    var ShopcartModal = () => import('../shopcartModal')
    var BuyItNowModal = () => import('../buyItNowModal')
    export default withStore({
        components: {
            SvgIcon, ShopcartModal, BuyItNowModal
        },
        data() {
            return {
                shopCartPopupVisible: false,
                buyitNowPopupVisible: false,
            }
        },
        mounted() {
            var self = this
            get_shop_cart_items().then(res => {
                self.setStore('shopcart.shopcartItems', res)
            })
        },
        methods: {
            add_to_cart_finish() {
                this.shopCartPopupVisible = false
            },
            got_to_buy_it_now() {
                if (!isLogin()) {
                    myalert.fail("亲登录先")
                    return false
                }
                this.buyitNowPopupVisible = !this.buyitNowPopupVisible
            },
            go_to_shop_cart() {
                var a = isLogin()
                if (!a) {
                    myalert.fail("亲登录先")
                    return false
                }
                this.shopCartPopupVisible = !this.shopCartPopupVisible
            }
        }
    })
</script>
<style lang="less" scoped>
    .bottom {
        z-index: 999;
        padding-left: px2rem(30);
        position: fixed;
        bottom: 0;
        height: 45px;
        width: 100%;
        max-width: 750px;
        background: #fff;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .layout_3 {
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding-right: px2rem(20);
            .svg_with_text {
                color: #787878;
                position: relative;
                .tag {
                    position: absolute;
                    top: -8px;
                    right: 5px;
                    background: orange;
                    color: #fff;
                    border-radius: 20px;
                    padding: 2px;
                    min-width: 15px;
                    text-align: center;
                }
            }
        }
        .gouwuche_lijigoumai {
            z-index: 999;
            display: flex;
            .gouwuche {
                width: 1rem;
                height: .36rem;
                display: flex;
                text-align: center;
                align-items: center;
                color: #fff;
                padding: 5px;
                font-size: .12rem;
                justify-content: center;
                background-image: linear-gradient(90deg, #5f5f5f, #2b2b2b);
                border-radius: 40px 0 0 40px;
            }
            .likegoumai {
                background-image: linear-gradient(90deg, #ff4e00, red);
                border-radius: 0 40px 40px 0;
                width: 1rem;
                height: .36rem;
                display: flex;
                text-align: center;
                align-items: center;
                color: #fff;
                padding: 5px;
                font-size: .12rem;
                justify-content: center;
            }
        }
    }
</style>